import React, { Component } from 'react'
import {Table ,Pagination , Tag ,Button} from "element-react"
import { MessageBox ,Form , Select,Input} from 'element-react/next'
import { name } from 'pubsub-js';

export default class DeviceStock extends Component {
    componentDidMount(){
        this.refresh()
        this.timer = setInterval(() => {
          this.refresh()
        }, 3000);
    }
    refresh = ()=>{
      fetch("/device/devicemanageinfo/getRepairInfo",{
        method:"POST",
        headers:{
          "Content-Type": "application/json",
        },
        body:JSON.stringify({page:this.state.page.currentPage})
      })
      .then(data=>data.json())
      .then(result=>{
        this.setState({data:result.page.list , page :{
          total: result.page.totalPage,
          pageSize:  result.page.pageSize,
          currentPage: result.page.currPage,
        }
      })
      })
    }
    statusmap={
      0:{
        tag:"primary",
        name:"待审批"
      },
      1:{
          tag:"warning",
          name:"审批取消"
      },
      2:{
          tag:"success",
          name:"审批通过"
      },
      3:{
          tag:"danger",
          name:"未通过"
      },
      4:{
        tag:"warning",
        name:"已出库"
      },
      5:{
        tag:"success",
        name:"已入库"
      },
      6:{
        tag:"danger",
        name:"出库失败"
      },
      7 : {
        tag:"danger",
        name:"归还审批"
      },
      8 : {
        tag:"success",
        name:"归还成功"
      },
      9 :{
        tag:"danger",
        name:"归还失败"
      },
      10:{
        tag:"danger",
        name:"购入审批"
      },
      11:{
        tag:"success",
        name:"购入通过"
      },
      12:{
        tag:"danger",
        name:"购入驳回"
      },
      13:{
        tag:"warning",
        name:"购入取消"
      },
      100:{
        tag:"danger",
        name:"作废",
      }
    } 
    state = {
        columns: [
            {
            fixed: 'left',
            align:"center",
            type:"index",
            },
            {
            label: "审批单号",
            prop: "id",
            width: 180,
            fixed: 'left',
            align:"center"
            },
            {
            label: "审批设备号",
            prop: "deviceid",
            width: 180,
            align:"center"
            },
            {
            label:"设备名称",
            prop:"devicename",
            align:"center",
            width: 180
            },
            {
            label: "申请人编号",
            align:"center",
            prop: "userid"
            },
            {
            label:"申请日期",
            align:"center",
            prop:"lenddate",
            width:200
            },
            {
            label: "申请人",
            align:"center",
            prop: "username"  
            },
            {
            label:"状态",
            align: 'center',
            width: 100,
            render: (row, column, index)=>{
                return (
                <Tag
                type={this.statusmap[row.status].tag}
                >{this.statusmap[row.status].name}</Tag>
                )
            },
            },
            {
            label:"操作",
            align: 'center',
            fixed: 'right',
            width: 100,
            render: (row, column, index)=>{
                return (
                <span style={{display:"flex"}}>
                    <Button plain={true} 
                    type="info" 
                    size="small"
                    icon='edit'
                    disabled={!(row.status===2||row.status===7)}
                    onClick={this.approverRecord.bind(this,index)} ></Button>
                    {/* <Button type="danger" size="small">移除</Button> */}
                </span>
                )
            }
            }
        ],
        data: [],
        page:{
          currentPage:1
        }
    }
    approverRecord(index){
      MessageBox.msgbox(
        {
          message:(
            <Form>
            <Form.Item label='申请事由'>
              <Input 
              type='textarea' 
              readOnly={true} 
              resize={"none"}
              size={"large"}
              autosize={{ minRows: 6, maxRows: 6}}
              value={this.state.data[index].msg}></Input>
            </Form.Item>
            <Form.Item label='意见'>
              <Select onChange={(e)=>{this.currdevicestatus = e }}>
                <Select.Option label={this.state.data[index].status===7?"入库":"出库"} value={this.state.data[index].status===7?8:4}/>
                <Select.Option label={ "驳回" } value={this.state.data[index].status===7?9:6}/>
              </Select>
            </Form.Item>
          </Form>
          ),
          showCancelButton:true
        }
      ).then(action=>{
        if(action==="confirm"){
          this.state.data[index].status = this.currdevicestatus
          fetch("/device/devicelendrecord/update",{
            method:"POST",
            headers:{
              "Content-Type": "application/json",
            },
            body:JSON.stringify(this.state.data[index])
          }).then(data=>data.json())
          .then(result =>{

          })
        } else {
          this.currdevicestatus = this.state.data[index].status;
        }
      })
    }

    pagechange = (currentPage)=>{
        fetch("/device/devicemanageinfo/getRepairInfo",{
          method:"POST",
          headers:{
            "Content-Type": "application/json",
          },
          body:JSON.stringify({page:currentPage})
        }).then(data=>data.json())
        .then(result =>{
          result.page.list.map((e)=>{
            e.lable = this.state.currentnode.label
            return e 
          })
          this.setState({data:result.page.list , page :{
            total: result.page.totalPage,
            pageSize:  result.page.pageSize,
            currentPage: result.page.currPage,
          }})
    
        })
    }


  render() {
    return (
      <div>
        <Table
        style={{width: '100%'}}
        columns={this.state.columns}
        data={this.state.data}
        border={true}
        maxHeight={550}
        />
        <div className="block" style={{}}>
        <Pagination layout="prev, pager, next" 
            pageCount={this.state.page.total} 
            pageSize={this.state.page.pageSize}
            currentPage={this.state.page.currentPage}
            onCurrentChange={this.pagechange}/>
        </div>
      </div>
    )
  }
}
